<template>
  <CanvasBg v-if="showGoHub"/>
  <Welcome @btnClcik="go" v-if="showGoHub"></Welcome>
  <NoDevice @btnClcik="getDeviceHandler" v-if="deviceGroups.length === 0 && !showGoHub"></NoDevice>
  <DeviceList @btnClcik="getDeviceHandler" v-if="deviceGroups.length > 0 && !showGoHub" :deviceList="deviceGroups"></DeviceList>
</template>

<script setup>
import Welcome from "./comps/Welcome.vue";
import NoDevice from "./comps/NoDevice.vue";
import DeviceList from "./comps/DeviceList.vue";
import CanvasBg from "./comps/CanvasBg2.vue";
import { ref } from "vue";
import { useHIDManager } from "./composables/useHIDManager.js";
import { useHidStore } from "./stores/useHidStore.js";
import bgiImage from './assets/imgs/bgi.png';
import { inElectron } from './utils/tools'

const {
  deviceGroups,
  requestDevice,
  fetchDeviceList,
} = useHIDManager();

const hidStore = useHidStore();
const showGoHub = ref(!inElectron)


fetchDeviceList().then(res => {
  hidStore.setHidList(res);
  window.HID_LIST = res || []
  console.log('window.HID_LIST:',window.HID_LIST)
})

const getDeviceHandler = ()=>{
    requestDevice()
}
const go = ()=>{
  showGoHub.value = false
  document.body.style.backgroundColor = '#000'
}
</script>

<style>
/* 确保 html 和 body 占满全屏 */
html, body {
  height: 100%;
  margin: 0;
  padding: 0;
}

/* 确保背景固定覆盖整个视口 */
body {
  position: relative;
  background-color: #000;
}

/* 高斯模糊背景样式 */
.blurred-background {
  position: relative;
  min-height: 100vh;
  width: 100%;
}

.blurred-background::before {
  content: '';
  position: fixed;
  top: 0px; 
  left: 0px;
  right: 0px;
  bottom: 0px;
  background-image: var(--bg-image);
  background-size: cover;
  background-repeat: no-repeat;
  background-attachment: fixed;
  background-position: center center;
  z-index: -1; /* 确保背景在内容下方 */
  filter: blur(3px); 
}
</style>
